<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="省" prop="province">
        <el-input
          v-model="queryParams.province"
          placeholder="请输入省"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-input
          v-model="queryParams.city"
          placeholder="请输入市"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="区" prop="region">
        <el-input
          v-model="queryParams.region"
          placeholder="请输入区"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系人" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入联系人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="电话" prop="telephone">
        <el-input
          v-model="queryParams.telephone"
          placeholder="请输入电话"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input
          v-model="queryParams.address"
          placeholder="请输入地址"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="仓库名称" prop="storehouseName">
        <el-input
          v-model="queryParams.storehouseName"
          placeholder="请输入仓库名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input
          v-model="queryParams.longitude"
          placeholder="请输入经度"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input
          v-model="queryParams.latitude"
          placeholder="请输入纬度"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['xdstore:wareHouse:query']">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- v-hasPermi="['system:ma:add']" -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['xdstore:wareHouse:add']"
        >新增</el-button>
      </el-col>
     
    </el-row>

    <el-table v-loading="loading" border stripe :data="maList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="唯一ID" align="center" prop="id" />
      <el-table-column label="省" align="center" prop="province" />
      <el-table-column label="市" align="center" prop="city" />
      <el-table-column label="区" align="center" prop="region" />
      <el-table-column label="联系人" align="center" prop="userName" />
      <el-table-column label="电话" align="center" prop="telephone" />
      <el-table-column label="地址" align="center" prop="address" />
      <el-table-column label="仓库名称" align="center" prop="storehouseName" />
      <el-table-column label="经度" align="center" prop="longitude" />
      <el-table-column label="纬度" align="center" prop="latitude" />
      <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!-- v-hasPermi="['system:ma:edit']" -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['xdstore:wareHouse:edit']"
          >修改</el-button>
          <!-- v-hasPermi="['system:ma:remove']" -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['xdstore:wareHouse:delete']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改仓库地址管理等对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="980px" :close-on-click-modal="false" append-to-body class="add-edit-dialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="padding-right:20px;padding-left: 20px;">

        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="storehouseName">
              <el-input v-model="form.storehouseName" placeholder="请输入仓库名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="电话" prop="telephone">
              <el-input v-model="form.telephone" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省" prop="province">
              <!-- <el-input v-model="form.province" placeholder="请输入省" />   -->
              <el-input ref="provinceId" v-model="form.province" disabled="disabled" placeholder="请在地图上选择门店位置, 回填省份" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="市" prop="city">
              <!-- <el-input v-model="form.city" placeholder="请输入市" /> -->
              <el-input ref="cityId" v-model="form.city" disabled="disabled" placeholder="请在地图上选择门店位置, 回填地市" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区" prop="region">
              <!-- <el-input v-model="form.region" placeholder="请输入区" /> -->
              <el-input ref="areaId" v-model="form.region" disabled="disabled" placeholder="请在地图上选择门店位置, 回填区域" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
            <!-- <el-input v-model="form.longitude" placeholder="请输入经度" /> -->
            <el-input ref="lngId" v-model="form.longitude" disabled="disabled" placeholder="请在地图上选择门店位置, 回填经度" />
          </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <!-- <el-input v-model="form.latitude" placeholder="请输入纬度" /> -->
              <el-input ref="latId" v-model="form.latitude" disabled="disabled" placeholder="请在地图上选择门店位置, 回填纬度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            
          </el-col>
        </el-row>

        <!-- 地图 -->
        <div class="map" id="map">
          <!-- 搜索框 -->
          <div class="input-group search">
            <input type="text" class="form-control getAddress" id="keyword" placeholder="请输入地址" aria-describedby="basic-addon2"
              @keydown="keyDown($event)">
            <button class="btn searchBtn" type="submit" @click="searchKeyword()">查找</button>
          </div>
          <!-- 提示语 -->
          <div class="prompt">
            小提示：右击获取地址
          </div>
          <!-- 地图 -->
          <div class="mappc" id="containerMap" style="height:400px;min-height:400px"></div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="padding-right:20px">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import requestCrm from '@/utils/requestCrm'
import { listMa, getMa, delMa, addMa, updateMa, exportMa } from "@/api/xdstore/warehouse";
import {
    TMap
  } from '../../../components/Map/TMap.js';
import { Loading } from 'element-ui';

export default {
  name: "warehouse",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 仓库地址管理等表格数据
      maList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isActiveOptions:[{dictLabel:'有效',dictValue:'0'},{dictLabel:'无效',dictValue:'1'}],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        province: '',
        city: '',
        region: '',
        userName: '',
        telephone: '',
        address: '',
        torehouseName: '',
        longitude: '',
        latitude: '',
        // isActive: '0',
      },
      // 表单参数
      form: {
        address: '',
        longitude: '',
        latitude: '',
        province: '',
        city: '',
        region: '',
        userName:'',
        telephone:'',
        storehouseName:'',
        // isActive:'',
      },
      // 表单校验
      rules: {
        province: [{ required: true, message: "请输入省", trigger: "blur" }],
        city: [{ required: true, message: "请输入市", trigger: "blur" }],
        region: [{ required: true, message: "请输入区", trigger: "blur" }],
        userName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        telephone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        storehouseName:[{ required: true, message: "请输入仓库地址", trigger: "blur" }],
        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        // isActive: [{ required: true, message: "请选择是否有效", trigger: "blur" }],
      },
      markersArray: [],
      town: '',
      street: '',
      streetNumber: '',
      addressComponents1: '', // 完整地址
      geocoder: null,
      geocoder1: null,
      loading: false,
      myLoadingObj: null,
      keyword:''
    };
  },
  watch: {
    $route(route) {
      if(route.path.includes('Warehouse')){
        console.log('刷新')
        // this.$router.go(0)
      }
    }
  },
  created() {
    const that = this;
    this.getList();
  },
  mounted() {
    
  },
  methods: {
    /** 查询仓库地址管理等列表 */
    getList() {
      this.loading = true;
      listMa(this.queryParams).then(response => {
        this.maList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加仓库地址管理";
      this.getMapFuntion()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = row;
      this.open = true;
      this.title = "修改仓库地址管理";
      this.getMapFuntion()
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateMa(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addMa(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delMa(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有仓库地址管理等数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportMa(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
    },
    startLoading: function() {
      const that = this;
      that.myLoadingObj = Loading.service({
        lock: true,
        text: '地图加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    endLoading: function() {
      this.myLoadingObj.close();
    },
    setMapData(longitude, latitude, province, city, area, street, addressComponents, callback) {
      const that = this;
      that.$nextTick(function() {
        if (longitude) {
          that.$set(that.form, 'longitude', longitude);
        }
        if (latitude) {
          that.$set(that.form, 'latitude', latitude);
        }
        if (province) {
          that.$set(that.form, 'province', province);
        }
        if (city) {
          that.$set(that.form, 'city', city);
        }
        if (area) {
          that.$set(that.form, 'region', area);
        }
        if (street) {
          that.$set(that.form, 'street', street);
        }
        if (addressComponents) {
          that.addressComponents = addressComponents;
          that.$set(that.form, addressComponents);
        }
        if (callback) {
          callback()
        }
      })
    },
    keyDown(ev) {
      /*回车搜索*/
      if (ev.keyCode == 13) {
        this.searchKeyword();
      }
    },
    wxGetTxMapgGeocoderByAddress(address, call){
        requestCrm({
            url:'WxService?method=wxGetTxMapgGeocoderByAddress',
            method: 'post',
            data: {
              address
            }
        }).then(res=>{
            if(call){
                call(res.data)
            }
        })
    },
    wxGetTxMapByLatLng(lat, lng, call){
      requestCrm({
          url:'WxService?method=wxGetTxMapByLatLng',
          method: 'post',
          data: {
            lat, lng
          }
      }).then(res=>{
          if(call){
              call(res.data)
          }
      })
    },
    searchKeyword() {
      let that = this
        /*点击搜索按钮搜索地图*/
        const keyword = document.getElementById("keyword").value;
        this.clearOverlays(this.markersArray);
        //对指定地址进行解析
        // this.geocoder.getLocation(keyword);
        this.wxGetTxMapgGeocoderByAddress(keyword, (pres)=>{
          if(pres){
            that.wxGetTxMapByLatLng(pres.result.location.lat, pres.result.location.lng, (res)=>{
                let result = res.result
                that.map.setCenter(new qq.maps.LatLng(result.location.lat, result.location.lng));
                /*获取地址*/
                /*省*/
                const province = result.address_component.province == undefined ? "" : result.address_component.province;
                /*市*/
                const city = result.address_component.city == undefined ? "" : result.address_component.city;
                /*区*/
                const area = result.address_component.district == undefined ? "" : result.address_component.district;
                /*街道*/
                that.town = result.address_component.town == undefined ? "" : result.address_component.town;
                /*具体*/
                that.street = result.address_component.street == undefined ? "" : result.address_component.street;
                that.streetNumber = result.address_component.street_number == undefined ? "" : result.address_component.street_number;
                
                const streetNumber = result.address_component.street_number == undefined ? "" : result.address_component.street_number;

                const street = that.town + that.street + that.streetNumber;

                const addressComponents = province + city + area + streetNumber;

                /*调整视图*/
                that.map.zoomTo(30);
                // that.markersArray.push(marker);
                that.setMapData(null, null, province, city, area, street, addressComponents, function() {
                  that.form.province = province;
                  that.form.city = city;
                  that.form.region = area;
                  // that.form.address = addressComponents;
                  that.$set(that.form, "address", addressComponents)
                  that.$refs.provinceId.focus();
                  that.$refs.cityId.focus();
                  that.$refs.areaId.focus();
                });
            })
          }
        })      
    },
    clearOverlays(markersArray) {
      if (markersArray && markersArray.length > 0) {
        for (const i in markersArray) {
          markersArray[i].setMap(null)
        }
        markersArray.length = 0
      }
    },
    getMapFuntion(){
      const that = this;
      TMap().then(qq => {
        that.startLoading();
        setTimeout(function() {
          that.endLoading();
          // 初始化地图
          const initLat = that.form.latitude ? Number(that.form.latitude) : 38.4230;
          const initLong = that.form.longitude ? Number(that.form.longitude) : 104.2115;
          var center = new qq.maps.LatLng(initLat, initLong);
          let initZoom = 4;
          if (that.form.latitude && (that.title === '修改仓库地址管理')) {
            initZoom = 30;
          }
          const myOptions = {
            zoom: initZoom,
            center: center,
            mapTypeId: qq.maps.MapTypeId.ROADMAP,
            //启用平移控件
            panControl: false,
            //启用缩放控件
            zoomControl: false,
            //设置控件的地图类型和位置
            mapTypeControlOptions: {
              //设置控件的地图类型ID，ROADMAP显示普通街道地图，SATELLITE显示卫星图像，              HYBRID  显示卫星图像上的主要街道透明层
              mapTypeIds: [],
              //设置控件位置相对上方中间位置对齐
              position: qq.maps.ControlPosition.TOP_CENTER
            }
          }
          const map = new qq.maps.Map(document.getElementById("containerMap"), myOptions)
          that.map = map
          // 监听地图单击事件：删除覆盖物
          qq.maps.event.addListener(map, 'click', function(event) {
            that.clearOverlays(that.markersArray)
          })

          const info = new qq.maps.InfoWindow({
            map: map
          })

          if (that.form.latitude && (that.title === '修改仓库地址管理')) {
            // 图标
            const marker = new qq.maps.Marker({
              map: map,
              position: center
            });
            that.markersArray.push(marker);
            qq.maps.event.addListener(
              marker,
              'click',
              function(evt) {
                that.clearOverlays(that.markersArray);
              });
          }

          // 地址和经纬度之间进行转换服务
          // 地址解析 Geocoder
          that.geocoder = new qq.maps.Geocoder({
            //设置服务请求成功的回调函数
            complete: function(pres) {
            },
            //若服务请求失败，则运行以下函数
            error: function() {
              alert("出错了，请输入正确的地址！！！");
            }
          })
          /*右击显示遮盖物，单击覆盖物消失*/
          qq.maps.event.addListener(map, 'rightclick', function(event) {
            const longitudeR = event.latLng.getLng();
            const latitudeR = event.latLng.getLat();
            const current = new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng());
            that.clearOverlays(that.markersArray);
            var marker = new qq.maps.Marker({
              position: current,
              map: map,
            });
            //调用城市经纬度查询接口实现经纬查询
            var latLng = new qq.maps.LatLng(latitudeR, longitudeR);
            // const cityR = that.geocoder1.getAddress(latLng);
            that.wxGetTxMapByLatLng(latLng.lat, latLng.lng, (res)=>{
              let result = res.result
              console.log(result.location)
              map.setCenter(new qq.maps.LatLng(result.location.lat, result.location.lng));
              /*获取地址*/
              /*省*/
              const province1 = result.address_component.province == undefined ? "" : result.address_component.province;
              /*市*/
              const city1 = result.address_component.city == undefined ? "" : result.address_component.city;
              /*区*/
              const area1 = result.address_component.district == undefined ? "" : result.address_component.district;
              /*街道*/
              that.town = result.address_component.town == undefined ? "" : result.address_component.town;
              /*具体*/
              that.street = result.address_component.street == undefined ? "" : result.address_component.street;
              that.streetNumber = result.address_component.street_number == undefined ? "" : result.address_component.street_number;
              const street1 = that.town + that.street + that.streetNumber;

              const addressComponents1 = province1 + city1 + area1 + street1;
              var marker = new qq.maps.Marker({
                map: map,
                position: new qq.maps.LatLng(result.location.lat, result.location.lng)
              });
              info.open();
              info.setContent('<div style="text-align:center;white-space:nowrap;' + '">' +
                addressComponents1 +
                '</div>');
              info.setPosition(marker.getPosition());

              /*调整视图*/
              map.zoomTo(30);
              that.markersArray.push(marker);

              that.setMapData(result.location.lat, result.location.lng, province1, city1, area1, street1, addressComponents1, function() {
                qq.maps.event.addListener(
                  marker,
                  'click',
                  function(evt) {
                    that.clearOverlays(that.markersArray);
                  });
                that.form.province = province1;
                that.form.city = city1;
                that.form.region = area1;
                // that.form.address = addressComponents1;
                that.$set(that.form, "address", addressComponents1)
                that.form.longitude = result.location.lng;
                that.form.latitude = result.location.lat;
                that.$refs.provinceId.focus();
                that.$refs.cityId.focus();
                that.$refs.areaId.focus();
              });
            });
            that.markersArray.push(marker);
          });
        }, 2000);
      })
    },
  }
};
</script>
<style>
.add-edit-dialog .el-dialog__body{
  height: 70vh;
  overflow-y: scroll;
}
.add-edit-dialog .el-dialog__header{
  text-align: left;
}
  .editor-content .quill-editor.editor {
    height: 100px
  }

  .form-btn-bar {
    margin-top: 30px;
    text-align: center;
  }

  /*搜索框*/
  .search {
    width: 100%;
  }

  .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
  }

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .input-group .form-control:first-child,
  .input-group-addon:first-child,
  .input-group-btn:first-child>.btn,
  .input-group-btn:first-child>.btn-group>.btn,
  .input-group-btn:first-child>.dropdown-toggle,
  .input-group-btn:last-child>.btn-group:not(:last-child)>.btn,
  .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .input-group .form-control,
  .input-group-addon,
  .input-group-btn {
    display: table-cell;
  }

  .input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
  }

  button,
  input,
  select,
  textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    margin: 0;
    font: inherit;
    color: inherit;
  }

  .input-group .form-control.getAddress {
    width: 85%;
  }

  .searchBtn {
    width: 15%;
    float: right;
    border-radius: 0 4px 4px 0;
    background: #dca131;
    color: #fff;
  }

  /*提示语*/
  .prompt {
    color: #e84720;
    font-size: 14px;
    font-family: '微软雅黑';
    margin: 5px 10px;
  }

  .validate {
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: #e84720;
  }

  .test {
    display: inline-block;
    width: 20px;
    height: 10px;
    background: rgba(239, 194, 192, 0.38);
  }

  /*地图*/
  .map {
    padding: 10px 30px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  #containerMap {
    margin: 10px auto;
    width: 100%;
    min-height: 470px;
  }

  /*经纬度设置*/
  .latLng {
    text-align: center;
    margin: 20px auto;
  }

  .latlngSpan {
    font-size: 16px;
  }

  .latlngInput {
    width: 200px;
    height: 25px;
    outline: none;
    background: #fff;
  }
  .office-dialog .el-dialog__body{
    max-height: 480px;
    overflow-y: scroll;
  }
   .office-dialog #containerMap{
    min-height: 320px;
  }
</style>